<template>
	<view>
		<!-- 使用自定义的搜索组件 -->
		<my-serch @click="gotoSearch"></my-serch>
		<view class="scroll_contain">
			<!-- 左侧滑动区域 -->
			<scroll-view scroll-y="true" class="scroll_left" :style="{height: wh+'px'}" >
				<block  v-for="(item,index) in cateList" :key="index" >
						<view :class="['scroll_left_item',index  == active?'active':''] " @click="changeActive(index)">{{item.cat_name}}</view>
				</block>
				
				
			</scroll-view>
			
			<!-- 右侧滑动区域 -->
			<scroll-view scroll-y="true" class="scroll_right" :scroll-top="scrollTop" :style="{height: wh+'px'}">
					
				<view v-for="(item,index) in cateLevel2" :key="index" class="scroll_right_wai">	
				<!-- 二级分类的标题 -->
					<view class="scroll_right_title">
							/{{item.cat_name}}/
					</view>
				<!-- //当前二级分类的三级分类 -->
					<view class="scroll_right_title_content">
						<view  class="scroll_right_title_content_item"  @click="gotogoodsList(item2)" v-for="(item2,i2) in item.children" :key="i2" >
							<!-- 三级分类的图片 -->
							<image :src="item2.cat_icon" mode="widthFix"></image>
							<!-- 三级分类的文本 -->
							<text>{{item2.cat_name}}</text>
						</view>
					
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import setBrage from "@/mixins/tabbar_badge.js"
	export default {
		data() {
			return {
				//2.设置屏幕可用高度的值
				wh:0,
				//4.定义分类列表的数据
				cateList:[],
				//5定义激活选项
				active:0,
				//6.定义二级分类的值
				cateLevel2:[],
				scrollTop:0
			};
		},
		mixins:[setBrage],
		onLoad(){
			//1.获取设备的可用高度
			 const systemInfo= uni.getSystemInfoSync();
			 //3.赋值给可用屏幕高度的值wh
			 this.wh=systemInfo.windowHeight-50;
			 this.getCateList();
		},
		methods:{
			async getCateList(){
				uni.$showMsg("获取数据中..");
				const {data:res}= await uni.$http.get("/api/public/v1/categories");
				console.log(res);
				if(res.meta.status != 200){
					return uni.$showMsg();
				}
				this.cateList=res.message;
				//7.将当前索引的二级分类赋值给当前数据
				this.cateLevel2 = res.message[0].children;
				console.log( res.message);
			},
			changeActive(i){
				this.active=i;
				this.cateLevel2 = this.cateList[i].children;
				//切换滚动条重置为0
				this.scrollTop=this.scrollTop == 0 ? 1 : 0;
			},
			//8.跳转到goods_list页面
			gotogoodsList(item){
				//使用uni.navigeto跳转
				uni.navigateTo({
					url:"/subpkg/goods_list/goods_list?cid="+item.cat_id
				})
			},
			gotoSearch(){
				uni.navigateTo({
					url:"/subpkg/search/search"
				})
			}
		}
	}
</script>

<style lang="scss">
.scroll_contain{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.scroll_left{
	width: 120px;
}
.scroll_right{
	flex: 1;
	
}
.scroll_left_item{
	background-color: #f7f7f7;
	line-height:60px;
	text-align:center;
	font-size:16px;
	&.active{
		background-color: #fff;
		color:#f40;;
		border-left: 3px solid red;
	}
} 
.scroll_right_wai {
	// display: flex;
	// flex-direction: column;
	// justify-content: center;
	// align-items: center;
}
.scroll_right_title{
	width: 100%;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 15px 0;
}
.scroll_right_title_content{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-column-gap: 10rpx;
	grid-row-gap: 10rpx;
}
.scroll_right_title_content_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding:0 10px;
	box-sizing: border-box;
	image{
		width: 100%;
	}
	text{
		font-size: 12px;
		text-align: center;
	}
}
</style>
